<template>
  <div>
    <div>
      <div class="imgg">
        <img
          src="https://img.tukuppt.com/png_preview/00/13/98/ONlo4blLbb.jpg%21/fw/780"
          alt=""
          class="iconimg"
          @click="$router.go(-1)"
        />
        <span>返回</span>
        <span class="h4">车辆管理</span>
      </div>
    </div>
    <el-tabs>
      <el-tab-pane label="基本信息" name="first">
        <div class="div">
          <p class="p">
            车辆编号：<span>{{ listData.truckLicenseId }}</span>
          </p>
          <p class="p">
            车牌号码：<span>{{ listData.licensePlate }}</span>
          </p>
          <p class="p">
            车型名称：<span>{{ listData.transportLineName }}</span>
          </p>
        </div>
        <div class="div">
          <p class="p">
            车辆体积: <span>{{ listData.allowableVolume }}</span>
          </p>
          <p class="p">
            车辆载重: <span>{{ listData.allowableLoad }}</span>
          </p>
          <p class="p">
            GPSID: <span>{{ listData.deviceGpsId }}</span>
          </p>
        </div>
        <div class="div">
          <p class="pp">图片信息:</p>
          <p>
            <img
              src="https://img1.baidu.com/it/u=1589914872,3919858087&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889"
              alt=""
              class="img"
            />
          </p>
        </div>
      </el-tab-pane>
      <!-- 行驶证信息 -->
      <el-tab-pane label="行驶证信息" name="second">
        <div class="div">
          <p class="p">
            行驶证号码：<span>{{ lists.transportCertificateNumber }}</span>
          </p>
          <p class="p">
            发动机号码：<span>{{ lists.engineNumber }}</span>
          </p>
          <p class="p">
            注册时间：<span>{{ lists.registrationDate }}</span>
          </p>
        </div>
        <div class="div">
          <p class="p">
            强制报废时间：<span>{{ lists.mandatoryScrap }}</span>
          </p>
          <p class="p">
            整备质量：<span>{{ lists.overallQuality }}</span>
          </p>
          <p class="p">
            检验有效期：<span>{{ lists.validityPeriod }}</span>
          </p>
        </div>
        <div class="div">
          <p class="p">
            核定载质量:<span>{{ lists.allowableWeight }}</span>
          </p>
          <p class="p">
            有效期:<span>{{ lists.expirationDate }}</span>
          </p>
        </div>
        <div class="div">
          <p class="pp">图片信息:</p>
          <p>
            <img :src="lists.picture" alt="" class="img" />
          </p>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { VehicledetailsApi, VehiilstApi } from '@/api/registration'
export default {
  data() {
    return {
      listData: [],
      lists: [],
      id: ''
    }
  },
  created() {
    this.listall()
    this.list()
  },
  methods: {
    async listall() {
      const list = this.$route.query.id
      const { data } = await VehicledetailsApi(list)
      this.listData = data.data
      this.id = data.data.id
      console.log(this.listData)
    },
    async list() {
      const list = this.$route.query.id
      const { data } = await VehiilstApi(list)
      this.lists = data.data
      console.log(this.lists)
    }
  }
}
</script>

<style scoped>
.div .p {
  float: left;
  width: 400px;
}
.div {
  overflow: hidden;
}
.div .pp {
  float: left;
}
.img {
  float: left;
  width: 150px;
  height: 150px;
  margin-left: 20px;
}
.iconimg {
  width: 30px;
  height: 30px;
  margin-right: 15px;
  line-height: 80px;
}
.h4 {
  font-weight: 700;
  display: inline-block;
  margin-left: 15px;
  line-height: 80px;
}
.imgg {
  height: 80px;
}
</style>